<template>
  <div class="fin_chart" ref="charts"></div>
</template>
<style lang="scss" scoped>
.fin_chart {
  width: 100%;
  height: 100%;
  // position: absolute;
}
</style>
<script>
import { finishedData } from "@/api/midApi.js";
export default {
  name: "FinChart",
  data() {
    return {
      pieData: null,
      timer: null,
      map: {
        "55024315": "B41V/B30前玻璃",
        "55024326": "B41V/B30后玻璃",
        "55025295": "B26前玻璃",
        "55025298": "B26后玻璃",
        "55020315": "V254移动玻璃",
        "55021698": "A07前玻璃",
        "55026682A": "B02前玻璃",
        "55021708": "B02/A07后玻璃",
        "55021809": "NU2前玻璃",
        "55021819": "NU2后玻璃",
        "55021857": "C52X前玻璃",
        "55021860": "C52X后玻璃",
        "55026631": "L541前玻璃",
        "55026647": "L541后玻璃",
      },
    };
  },
  created() {
    this.getChartData();
  },
  mounted() {
    this.mycharts();
    this.timer = setInterval(() => {
      setTimeout(this.getChartData(), 0);
    }, 10000);
  },
  watch: {
    pieData(val) {
      this.mycharts();
    },
  },
  methods: {
    getChartData() {
      this.pieData = null;
      console.log("getChartData");
      finishedData()
        .then((res) => {
          if (res.status == 200) {
            const result = JSON.parse(JSON.stringify(res.data));
            //  const result = {
            //   location_empty: 12,
            //   location_name1: "IHE-FG-0122",
            //   location_name10: "null_location",
            //   location_name11: "IHE-FG-0617",
            //   location_name12: "IHE-FG-0125",
            //   location_name13: "IHE-FG-0402",
            //   location_name14: "IHE-FG-0403",
            //   location_name2: "IHE-FG-0305",
            //   location_name3: "null_location",
            //   location_name4: "null_location",
            //   location_name5: "IHE-FG-0211",
            //   location_name6: "null_location",
            //   location_name7: "IHE-FG-0604",
            //   location_name8: "IHE-FG-0422",
            //   location_name9: "IHE-FG-0118",
            //   location_total: 142,
            //   object_sum1: 2,
            //   object_sum10: 0,
            //   object_sum11: 4,
            //   object_sum12: 4,
            //   object_sum13: 22,
            //   object_sum14: 18,
            //   object_sum2: 5,
            //   object_sum3: 0,
            //   object_sum4: 0,
            //   object_sum5: 9,
            //   object_sum6: 0,
            //   object_sum7: 3,
            //   object_sum8: 3,
            //   object_sum9: 3,
            //   part_A: 35,
            //   part_A1: 4,
            //   part_B: 18,
            //   part_no1: "55024315",
            //   part_no10: "55021819",
            //   part_no11: "55021857",
            //   part_no12: "55021860",
            //   part_no13: "55026631",
            //   part_no14: "55026647",
            //   part_no2: "55024326",
            //   part_no3: "55025295",
            //   part_no4: "55025298",
            //   part_no5: "55020315",
            //   part_no6: "55021698",
            //   part_no7: "55026682A",
            //   part_no8: "55021708",
            //   part_no9: "55021809",
            // };
            const path1 = result.object_sum1;
            const path2 = result.object_sum2;
            const path3 = result.object_sum3;
            const path4 = result.object_sum4;
            const path5 = result.object_sum5;
            const path6 = result.object_sum6;
            const path7 = result.object_sum7;
            const path8 = result.object_sum8;
            const path9 = result.object_sum9;
            const path10 = result.object_sum10; //55021819
            const path11 = result.object_sum11; //55021857
            const path12 = result.object_sum12; //55021860
            const path13 = result.object_sum13; //55026631
            const path14 = result.object_sum14; //55026647
            this.pieData = [
              { name: this.map[result.part_no1], value: path1 },
              { name: this.map[result.part_no2], value: path2 },
              { name: this.map[result.part_no3], value: path3 },
              { name: this.map[result.part_no4], value: path4 },
              { name: this.map[result.part_no5], value: path5 },
              { name: this.map[result.part_no6], value: path6 },
              { name: this.map[result.part_no7], value: path7 },
              { name: this.map[result.part_no8], value: path8 },
              { name: this.map[result.part_no9], value: path9 },
              { name: this.map[result.part_no10], value: path10 },
              { name: this.map[result.part_no11], value: path11 },
              { name: this.map[result.part_no12], value: path12 },
              { name: this.map[result.part_no13], value: path13 },
              { name: this.map[result.part_no14], value: path14 },
            ];
            console.log("图表数据:", this.pieData);
          }
        })
        .catch((error) => {
          throw error;
        });
    },
    mycharts() {
      let myChart = this.$echarts.init(this.$refs.charts);
      let option = {
        title: {
          text: "各项目库存占比",
          top: 3,
          left: 3,
          textStyle: {
            fontSize: 24,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}",
          textStyle: {
            fontFamily: "Microsoft YaHei",
            fontStyle: "normal",
            fontWeight: "lighter",
            fontSize: 16,
          },
        },
        series: [
          {
            name: "占暂存区库位总量",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 18,
                fontStyle: "normal",
                fontWeight: "lighter",
                fontFamily: "Microsoft YaHei",
              },
              position: "outside",
              formatter: "{b}{c}",
              // formatter: "{b}\n{c}",
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffstX: 0,
                shadowColor: "rgba(0,0,0,0.5)",
              },
              // normal: {
              //   color: function(params) {
              //     let colorList = [
              //       "#6A5ACD",
              //       "#8470FF",
              //       "#4169E1",
              //       "#1E90FF",
              //       "#87CEEB",
              //       "#87CEFA",
              //       "#00868B",
              //     ];
              //     return colorList[params.dataIndex];
              //   },
              // },
            },
            data: this.pieData,
          },
        ],
        color: [
          "#00868B",
          "#6A5ACD",
          "#8470FF",
          "#00FFFF",
          "#1E90FF",
          "#87CEEB",
          "#87CEFFA",
          "#00868B",
          "#6A5ACD",
          "#8470FF",
          "#00FFFF",
          "#1E90FF",
          "#87CEEB",
          "#87CEFFA",
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
